Menunjukan state manajement yg lain namanya mobx 
Untuk state manajement sendiri bisa lihat video nomor 42 
Buat aplikasi sederhana menaikan bilangan dan menurunkan bilangan 
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MOBX STATE MANAGEMENT 
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Reactions/Observers 


Sebelum coding 

Menujukan konsep 

Disni ada 3 hal penting 

Pertma obervales 

Reactions/obervers 

Action 

Obervable adalah data atau state kita obsulte atau kita pantau 
Reaction itu pantau nya 

Action itu berubah 

Prosees ini memulai pertama obervers akan trigers action sebuah aksi 
Nanti action akan ubah data yg ada di obervables ini kalau sudah beubah 
Nanti ada pembertiahuan notify 

Maka reaction akan update pada ui kita pada saat perubahan itu terjadi 


© mindan © 
V OPEN EDITORS 1 UNSAVED import 
.6 


aaa S void main => runApp(MyApp() 


class IN extends 
Dove 
Widge BuildContext context) | 
return LApp( 
debugShowCheckedModeBanner: false, 
home: Mair 


); 


3 JUTPUT Flutter 


In order to run your application, type: 


$ cd 
$ flutter run 


> OUTUNE 
DEPENDENCIES > h A A s : 
me Your application code is in .\lib\main.dart. 


D aa an i : s A $ os OM a, 
Buat main page nya 

Judul mob state managemnt demo 

Center child column mainaxis center 

Kasih text untuk data nya 

Kasih sizedbox height 40 

Didalm row ada 2 floating button 


Onprased kosongi dahulu child icon lalu kasih jarak 20 
Row mainaxis nya center 


lectie Debug mi Help 


© maindan * 
OPEN EDITORS 1 UNSAVED ” et DuUl1LOLBU a 
.. return Scaffold( 
SOA appBar: AppBar(title: Text( 
Midea 
Na —body: Center 
P child: Column( 
~ mainAxisAlignment: MainAxisAlignment.center, 
e children: <Widget>[ 
L Text , style: 2xtStyle( fontSize: 80) 
dBox( height: 


context) i 


mainAxisALignment: i g t.center), 
children: «Widget» | 
FloatingA 
onPressed: , 
child: Icon(Icons.arrow downward 


, 


), 


x(width: 20,), 
FloatingActionButton( 
onPressed: , 


child: Icon(Icons.arrow upward), 


Flutter 


In order to run your application, type: 


$ cd 
$ flutter run 
ourune 
> DEPENDENCIES = a : 5 à = 
Your application code is in .\lib\main.dart. 


Jalankan 


& mindan X 
v OPEN EDITORS LugeL JLLGLONLEXL CONLExL) 4 


x & maindart 
MOBX STATE MANAGEMENT F Text( 
m dant 


child: Column( 
mainAxisAlignment : nAxisALignment.center, 
children: <Widget>[ 
, Style: TextStyle(fontSize: 80)), 
Box(height: 
tow 
mainAxisAlignme MainAxisAlignment.center, 
children: <Wic 
loatingActionButton( 
onPressed: , 
child: Icon(Icons.arrow downward), 


), 


x(width: 20,), 

tingActionButton( 
onPressed: , 
child: Icon(Icons.arrow upward), 
Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug. apk. 
I/flutter (11238): Overflow on channel: flutter/lifecycle. Messag 
rded in FIFO fashion. The engine may not be running or you need t4 


OUTLINE channel. 
> DEPENDENCIES 


Sudah jadi tampilan nya sekarang buat 
Mobx nya di folder 
Buat satu buah file 


Dunter.dart X 


DULLL VULLU Napi NYU CPU LD japan KUSYUH \app-UcuUg.- apr. 


I/flutter (11238): Overflow on channel: flutter/lifecycle. Messages on this channel are being disca 


rded in FIFO fashion. The engine may not be running or you need to adjust the buffer size if of the 


channel. 
Application finished. 


OUTUNE 
> DEPENDENCIES 
TODOS 


Pertama kali harus buat adalah clas manruh si observibes nya dan action nya 
Selain buat pubspec yam! dulu 

Tambhakn packagenya 

Mobx 


V OPEN EDITORS 1 UNSAVED 


t 
61) pubspe 
MOBX STATE MANAGEMENT 


: 1.0.0+1 


"22.8.0 <3.0.0" 


: flutter 
: “0.3.94+1 
a ee 
0. 
p SN 


Sa AE EU RAN apne 

I/flutter (11238): Overflow on channel: flutter/lifecycle. Messages on this channel are being disca 
rded in FIFO fashion. The engine may not be running or you need to adjust the buffer size if of the 
channel. 

Application finished. 


OUTUNE 
DEPENDENCIES. Exited (sigterm 


P Type here t 


Import dahulu mobx dart 

Lalu buat abstract class counterMobx with Store 
Ini implemen namanya store 

Buat int value pertama nilai nya 0 


Value ini adalah nilai yg akan diber observale kasih tanda 
Lalu kita buat 

Menthod incremnt tujuan untuk meninkatan 

Dan buat juga decrement 


ele Terminal 


ounter.dart X 


v OPEN EDITORS package:mobx/mobx.dart'; 


V MOBX STATE MANAGEMENT 
a dart 


increment() { 
value+; 


} 


decrement() { 
value--; 
} 
} 


JIPU’ Flutter 
[mobx_state_management] flutter packages get 

Running "flutter pub get" in mobx_state_management ... 

exit code 0 


> OUTLINE 
DEPENDENCIES 


Increment dan decremnt yaitu aksi maka kita berikan @action 

Class yg kita buat hanya ini saja class tambhakn yg susah itu akan mengenrate 
build runner 

Kita serahkan mobx 

Kasih tau 

Part 'counter.g.dart 

Langkah berikutnya buat class mobx yg kita pakai 

ADStract kasih agar beda 


impor 
part 


class 


abstract class 
observable 
nt value = 0; 


action 
void increment() 
value+; 


} 


@action 
void decrement() { 
value—; 


) 


Imobx state management) flutter packages get 
Running "flutter pub get" in mobx state management ... 
exit code 0 


OUTUNE 
> DEPENDENCIES 


Jadi class CounteMobx merupakan turunan dari countermobx lalu di isi dan $ 
dolarnya 

Ini masih eror karena belum generate 

Skerang jalan buld runner ke terminal 


© counterdart X 
v OPEN EDITORS import 
© maindart A 
: part 
ké 
f 
MOBX STATE MANAGEMENT class ( 


abstract class 
@observable 
nt value 


@daction 
void increment() | 
value: 


} 


qgaction 
void decrement() { 
value--; 


} 


3 TERMINAL 1: powersheli 
Copyright (C) Microsoft Corporation. All rights reserved. 


Try the new cross-platform PowerShell https aka.ms/pscore6 


OUTUNE 


Google Drive Maranatha\FlutterProject\mobx_state_management> L er packages pub run b 
> T0005 uild_runner build 


DEPENDENCIES 


Kalau berhasil maka ada file baru counter.g.dart 
Gk eror lagi 
“J Fie View Ge 


© counterg.dart X 
super.value = value; 
_$valueAtom. reportChanged( ); 
, _$valueAtom, name: _$valueAtom. name 


t 
unter g dart 
pe 
V MOBX STATE MANAGEMENT 


final $_CounterMobxActionContr = ActionController(name: 
dea 
override 
void increment() { 
final _$actionInfo = it xActionController.startAction(); 
try { 
return super.increment 
} finally { 
CounterMobxActi roller.endAction(_$actionInfo); 


} 


@override 
void decrement() { 
final...$actionInfo.- ounterMobxActionController.startAction( ): 


1: powershell 


[INFO] Caching finalized dependency graph... 
(INFO) Caching finalized dependency graph completed, took 19ms 


LINFOJ Succeeded after 8.9s with 2 outputs (7 actions) 


ouTune 
> DEPENDENCIES 
Tooos PS E:\Google Drive - Maranatha\FlutterProject\mobx_state_management> 


D an ; | 

Maka sudah dibuat gk perlu diubah2 karena sudah di generate 
Sekarang ke main dart 

Buat 

Final CounterMbox counter = CounterMbox jgn lupa import 


& mindan © © 
V OPEN EDITORS 1 UNSAVED import 
© & maindart it 


c import 
terdart 


MOBX STATE MANAGEMENT final ( terM counter = ( 


void main => runApp(MyApp( ) 


class App extends Stateles 
yo ride 
iget build(BuildContext context) { 
return eri 
debugShowCh ModeBanner: false, 
home: MainP 5 
); 
} 


clas inPage extends 
override 
N build(BuildContext context) { 


h 


[INFO] Caching finalized dependency graph... 
[INFO] Caching finalized dependency graph completed, took 19ms 


[INFO] Succeeded after 8.9s with 2 outputs (7 actions) 


> OUTUNE 
DEPENDENCIES 
> TODOS PS E:\Google Drive - Maranatha\FlutterProject\mobx_state_management> 


D P Type here to search J , f AO eek EDO LO 


Kebawah di text klik kakan bungkus widget Observer kita import flutter mbox dart 
nya 

Kita return text nya 

Isinya dalah counter.value.tostring 


debug minal 
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OPEN EDITORS 1 UNSAVED hol tac 


© & maindart it appBar 
© counterdart title: 


F 


MOBX STATE MANAGEMENT , 
body: Center 
chil Column( 
mainAxisAlignment: AxisAlignment.center, 
children: <Widget>[ 
Obse rver 
builder: (context) = Text(counter.value.toString( )l, 

style: TextStyle(fontSize: 80))), 
zedBox 
height 
, 


Row 


mainAxisAlignment: MainAx ignment.center, 
children: <Widget>[ 
FloatingActionButton( 
onPressed: - 
child: Icon(Icons.arrow downward), 


RMINAL 1: powershell 
LINFOJ Caching finalized dependency graph... 
LINFOJ Caching finalized dependency graph completed, took 19ms 


LINFOJ Succeeded after 8.9s with 2 outputs (7 actions) 
ourune 


DEPENDENCIES 
> TODOS 


lalu kebawah untuk onprased kita pangil 
Counter.incrtement; 


© mindan © 
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© & maindart 
© counter.dart 
pecyan 
MOBX STATE MANAGEMENT ad 
mainAxisAlignment: MainAxi ignment.center, 
children: <Widget>[ 
FloatingActionButton( 
onPressed: 


counter.decrement( ); 


, 
child: Icon(Icons.arrow downward), 


1gActionButton( 
onPressed: 
counter.incre t(); 


, 
child: r ns.arrow upward), 


1: powershell 


(INFO) Caching finalized dependency graph... 
LINFOJ Caching finalized dependency graph completed, to 


[INFO ceeded after 8.9s with 2 outputs (7 actions) 


ourune 
> DEPENDENCIES 
rooos PS E:\Google Drive - MaranathaNFlutterProjectNmobx state management» 


D na kaa Bani i : Ose ERG 


Jalankan 


No Config " € maindart X 
v VARIABLES Sizedt 
height: 40, 


, 


mainAxisAlignment: 
children: <Widget>[ 
FloatingActionButton( 
onPressed: 
counter.decrement(); 


, 
child: Icon(Icons.arrow_downward), 
r 
zedBox( 
width: 20, 


oatingActionButton( 
onPressed: 
counter.increment(); 


V CALL STACK arrow upward), 


[INFO] Caching finalized dependency graph... 
[INFO] Caching finalized dependency graph completed, took 19ms 


[INFO] Succeeded after 8.9s with 2 outputs (7 actions) 


V BREAKPOINTS 
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